<template>
  <div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input style="width: 240px;" v-model="adminStore.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
      <el-button type="primary" @click="adminStore.getLoad">查 询</el-button>
      <el-button type="warning" @click="adminStore.reset">重 置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">
      <el-button type="primary" @click="adminStore.handleAdd">新 增</el-button>
      <el-button type="danger" @click="adminStore.deleteBatch">批量删除</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">
      <el-table stripe :data="adminStore.options" strip @selection-change="adminStore.handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="账号" prop="username" />
        <el-table-column label="头像">
          <template #default="scope">
            <img v-if="scope.row.avatar" :src="scope.row.avatar" style="display: block; width: 40px; height: 40px; border-radius: 50%;">
            <img v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="width: 40px; height: 40px; border-radius: 50%;">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" :icon="Edit" circle @click="adminStore.handleUpdate(scope.row)"></el-button>
            <el-button type="danger" :icon="Delete" circle @click="adminStore.handleDelete(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" style="margin-bottom: 10px;">
      <el-pagination
        @change="adminStore.getLoad"
        v-model:current-page="adminStore.pageNum"
        v-model:page-size="adminStore.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="adminStore.total"
      />
    </div>
    <el-dialog v-model="adminStore.formVisible" title="管理员信息" width="500" destroy-on-close>
      <el-form ref="formRef" :rules="rules" :model="adminStore.form" label-width="80px">
        <el-form-item label="账号" prop="username">
          <el-input :disabled="adminStore.form.id!=null" v-model="adminStore.form.username" autocomplete="off" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-upload
            list-type="picture"
            action="http://localhost:8080/files/upload"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-button type="primary">上传头像</el-button> 
          </el-upload>  
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="adminStore.form.name" autocomplete="off" placeholder="请输入名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="adminStore.formVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useAdminStore } from '@/store/adminStore';
import { onMounted, ref } from 'vue';
import { Edit, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
const adminStore = useAdminStore();
const formRef = ref();

// 表单校验规则
const rules = {
  username: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '账号长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' }
  ],
};
const handleAvatarSuccess = (res) => {
  if (res.code === '200' && res.data) {
    adminStore.form.avatar = res.data; // 将上传的头像 URL 赋值给表单
    ElMessage.success('头像上传成功');
  } else {
    ElMessage.error('头像上传失败');
  }
};
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 5; // 限制文件大小为 2MB

  if (!isImage) {
    ElMessage.error('只能上传图片文件');
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB');
  }

  return isImage && isLt2M;
};

// 保存操作
const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      adminStore.save(); // 调用 store 中的保存方法
    } else {
      ElMessage.error('请填写完整的表单信息');
    }
  });
};

onMounted(() => adminStore.getLoad());
</script>